<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true"  ref="filters"  :model="filters">
                <el-form-item label="">
                    <el-select clearable placeholder="操作类型" v-model="filters.checkType" @change="getLogs()">
                        <el-option :key="item.value" :label="item.key" :value="item.value" v-for="item in options" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div class="block">
                        <el-date-picker
                                v-model="filters.dataRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                                placeholder="选择时间范围" @change="getLogs()"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item prop="nickname">
                    <el-input
                            placeholder="用户名"
                            v-model.trim="filters.nickname">
                    </el-input>
                </el-form-item>
                <el-form-item prop="user_name">
                    <el-input
                            placeholder="手机号"
                            v-model.trim="filters.user_name">
                    </el-input>
                </el-form-item>
                <el-form-item prop="mark">
                    <el-input
                            placeholder="参数"
                            v-model.trim="filters.mark">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>

            </el-form>
        </el-col>

        <!--<el-table :data="listMe(tableData,filters.dataSear)" stripe highlight-current-row >-->
        <el-table :data="logs" stripe highlight-current-row >
            <el-table-column prop="user_name" label="手机号" width="180px" />
            <el-table-column prop="nickname" label="用户名" width="180px" />
            <el-table-column prop="login_ip" label="登录地址" width="150px"> </el-table-column>
            <el-table-column label="操作类型" width="150px">
                <template slot-scope="scope">
                    <span>{{ changeType(scope.row.type) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作内容" width="280px" />
            <el-table-column label="参数" >
                <template slot-scope="scope">
                    <span>{{ markFormat(scope.row.mark) }}</span>   <el-button type="text" v-if="scope.row.mark" @click="showmMarkAll(scope.row.mark)">详细</el-button>
                </template>
            </el-table-column>
            <!--<el-table-column prop="mark" label="备注" > </el-table-column>-->
            <el-table-column label="时间" width="200px">
                <template slot-scope="scope">
                    <span>{{ fmtDate(scope.row.create_time) }}</span>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" background @current-change="handleCurrentChange" :page-size="page_size" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
        <el-dialog title="显示全部参数" :visible.sync="showmMarkInfoModule">
           <span style="
            word-wrap: break-word;
            word-break: break-all;
            white-space: pre-wrap !important;"
           >{{ showmMarkInfo }}</span>
        </el-dialog>
    </section>
</template>

<script>
    import {getSystemLogList} from  '../../api/auth_api';
    import {formatDate} from '../../common/js/date';
    import dict from '../../common/js/dict';

    export default {
        data() {
            return {
                page_no: 1,
                total: 0,
                page_size:10,
                showmMarkInfo:'',
                showmMarkInfoModule:false,
                filters:{
                    checkType:'',   //选择行为
                    dataRange:'',    //时间范围
                    nickname:'',    //昵称
                    user_name:'',    //用户名手机号
                    mark:'',    //备注
                },
                logs:[{
                    create_time:'',     //时间
                    login_ip:'',        //登录ip
                    type:'',            //操作类型
                    operation:'',       //操作内容
                    user_name:'',       //用户名 手机号
                    nickname:'',       //昵称
                    mark:''              //备注
                }],
                options: dict.log_type
            }
        },
        methods:{
            search() {
               this.getLogs();
            },
            reset() {
                this.$refs['filters'].resetFields();
                this.page_no = 1;
                this.getLogs()
            },
            getLogs() {

                let condition = {};
                let flag = false;
                if(this.filters.dataRange == '' || this.filters.dataRange == null){
                    flag = true;
                }
                condition.type = this.filters.checkType;
                condition.user_name = this.filters.user_name;
                condition.nickname = this.filters.nickname;
                condition.mark = this.filters.mark;
                condition.start_time = flag ?'':this.filters.dataRange[0] + ' 00:00:00';
                condition.end_time= flag ?'':this.filters.dataRange[1] + ' 23:59:59';

                let paras = {
                    page_no: this.page_no,
                    condition: condition
                };

                getSystemLogList(paras).then((res) => {
                    if(res.data.status == 200){
                        let datas = JSON.parse(res.data.datas);
                        this.logs = datas.items;
                        this.total = datas.total;
                        this.page_size = datas.page_size;
                    }else{
                        if(res.data.status == 401){
                            this.$router.push('/login');
                        }
                        this.$message(res.data.msg);
                    }

                });
            },
            changeType(row){
                let val = '';
                this.options.forEach((item)=>{
                    if(item.value == row){
                        val = item.key;
                    }
                })
                return val;
            },
            fmtDate(time) {
                let date = new Date(time);
                return formatDate(date, "yyyy-MM-dd hh:mm:ss");
            },
            markFormat(data) {
                if(data) return data.substring(1,20)
                return '暂无'

            },
            showmMarkAll(data) {
                this.showmMarkInfoModule = true;
                this.showmMarkInfo = data;
            },
            handleCurrentChange(val){
              this.page_no = val;
              this.getLogs();
            }
        },
        mounted(){
            this.$nextTick(()=>this.getLogs())
        }
    }
</script>

